<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // model 模型层 data 
        const student = {
            'first-name':'Jessica',
            'last-name':'Bre',
            'height':180,
            'weight':70
        }

        // 封装 ， 抽象
        const createListItem = function(label,content){
            const li = document.createElement('li');
            const labelSpan = document.createElement('span');
            labelSpan.textContent = label;
            const contentSpan = document.createElement('span');
            contentSpan.textContent = content;
            li.appendChild(labelSpan);
            li.appendChild(contentSpan);
            return li;
        }

        // view 
        const root = document.createElement('ul')
        const nameLi=createListItem('name:',student['first-name']+' '+student['last-name'])
        const heightLi=createListItem('height:',student['height'])
        const weightLi=createListItem('weight:',student['weight'])

        // const nameLi = document.createElement('li')
        // const nameLabel = document.createElement('span')
        // nameLabel.textContent = 'Name:'
        // const name_=document.createElement('span')
        // name_.textContent = student['first-name'] + ' ' +student['last-name']
        // nameLi.appendChild(nameLabel)
        // nameLabel.appendChild(name_)

        // const heightLi = document.createElement('li')
        // const heightLabel = document.createElement('span')
        // heightLabel.textContent = 'height:'
        // const height_=document.createElement('span')
        // height_.textContent = student['height']+'cm'
        // heightLi.appendChild(heightLabel)
        // heightLabel.appendChild(height_)

        // const weightLi = document.createElement('li')
        // const weightLabel = document.createElement('span')
        // weightLabel.textContent = 'weight:'
        // const weight_=document.createElement('span')
        // weight_.textContent = student['weight']+'kg'
        // weightLi.appendChild(weightLabel)
        // weightLabel.appendChild(weight_)

        root.appendChild(nameLi)
        root.appendChild(heightLi)
        root.appendChild(weightLi)

        document.body.appendChild(root)
    </script>
</body>
</html>